<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Regular.js • SVG-Pie</title>
  <script src="../../dist/regular.js"></script>
</head>
<body>
  <div id="pie"></div>
  
  <!-- from http://snapsvg.io/demos/#coffee for complex static demo -->
  <script type="text/regular" id="app">
    <svg height="1400" version="1.1" width="1400">
      <circle on-click={this.small()} cx="{width}" cy="{height}" r="{circle}" fill="#fefefe" stroke="#333" stroke-width="4" ></circle>
      <g id="Layer_1_1_">
        <defs>
            <path id="textline" fill="none" d="M474.432,344.553c7.165-5.251,16.004-8.351,25.568-8.351c9.294,0,17.905,2.928,24.958,7.913"></path>
        </defs>
        <g>
          <polygon fill="#FFFFFF" points="358,707.5 358,686.086 418,626.086 418,303.5 580,303.5 580,626.086 640,686.086 640,707.5     "></polygon>
          <path fill="#60544F" d="M579,304.5v322l60,60v20H359v-20l60-60v-322H579 M581,302.5h-2H419h-2v2v321.172l-59.414,59.414
            L357,685.672v0.828v20v2h2h280h2v-2v-20v-0.828l-0.586-0.586L581,625.672V304.5V302.5L581,302.5z"></path>
        </g>
        
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="142.5" y1="660.5" x2="142.5" y2="57.5" gradientTransform="matrix(1 0 0 1 -42 206)">
          <stop offset="0" style="stop-color:#E1DAD5"></stop>
          <stop offset="0.3204" style="stop-color:#FFFFFF"></stop>
        </linearGradient>
        <rect x="-378" y="263.5" display="none" fill="url(#SVGID_1_)" width="957" height="603"></rect>
        <ellipse display="none" fill="#E6E6E6" cx="129" cy="446.5" rx="70" ry="20"></ellipse>
        <path display="none" fill="#999999" d="M79.503,460.642L129,446.5l49.497,14.142C191.165,457.023,199,452.023,199,446.5
          c0-11.046-31.34-20-70-20s-70,8.954-70,20C59,452.023,66.835,457.023,79.503,460.642z"></path>
        <ellipse display="none" fill="#999999" cx="129" cy="626.586" rx="50" ry="14.286"></ellipse>
        <ellipse display="none" fill="#B3B3B3" cx="129" cy="618.3" rx="50.75" ry="14.5"></ellipse>
        <path display="none" opacity="0.1" fill="#FF0000" enable-background="new    " d="M93.645,636.687L129,626.586l35.355,10.102
          c9.048-2.585,14.645-6.157,14.645-10.102c0-7.89-22.386-14.286-50-14.286s-50,6.396-50,14.286
          C79,630.531,84.596,634.102,93.645,636.687z"></path>
        <rect x="419" y="304.5" fill="#CCC1BC" stroke="#60544F" stroke-miterlimit="10" width="160" height="325.15"></rect>
        <polygon fill="#F4EEE6" stroke="#60544F" stroke-miterlimit="10" points="639,686.5 359,686.5 419,626.5 579,626.5   "></polygon>
        <rect x="359" y="686.5" fill="#E0D8D3" stroke="#60544F" stroke-miterlimit="10" width="280" height="20"></rect>
        <rect x="802.2" y="524.5" fill="none" width="112.8" height="101.6"></rect>
        <ellipse id="top" fill="none" stroke="#60544F" stroke-width="2" stroke-miterlimit="10" cx="499" cy="486.5" rx="70" ry="22"></ellipse>
        <g><path d="M448.091,666.5A50.909,15.272699999999999,0,0,1,549.909,666.5L569,486.5A70,21,0,0,0,429,486.5z" class="outline"></path><ellipse cx="499" cy="546.5" rx="63.63633333333333" ry="19.090899999999998" class="water"></ellipse><path d="M499,656.5,535.7480644322944,667.5244193296883,538.4979372314788,631.682714502777,499,619.8333333333334,459.5020627685212,631.682714502777,462.2519355677056,667.5244193296883z" fill="url('#Shzxej2s83e')"></path><path d="M499,619.8333333333334,538.4979372314788,631.682714502777,543.9976828298475,559.9993048489542,499,546.5,454.0023171701525,559.9993048489542,459.5020627685212,631.682714502777z" fill="url('#Shzxej2s83l')"></path><g></g><path d="M429,486.5A70,21,0,0,0,449.50252531694167,501.3492424049175L463.00190087657404,677.2994297370278A50.909,15.272699999999999,0,0,1,448.091,666.5zM548.4974746830583,501.3492424049175A70,21,0,0,0,569,486.5L549.909,666.5A50.909,15.272699999999999,0,0,1,534.998099123426,677.2994297370278z" class="doors"></path></g><g id="tap">
          <g>
            <path fill="#FFFFFF" d="M499,479.5c-4.086,0-11-0.812-11-3.857v-5.389l-25.762-21.468h73.523L510,470.254v5.389
              C510,478.688,503.086,479.5,499,479.5z"></path>
            <path fill="#60544F" d="M533,449.786l-24,20v5.857c0,1.578-4.477,2.857-10,2.857s-10-1.279-10-2.857v-5.857l-24-20H533
               M538.524,447.786H533h-68h-5.524l4.244,3.536l23.28,19.4v4.92c0,4.623,9.996,4.857,12,4.857s12-0.234,12-4.857v-4.92l23.28-19.4
              L538.524,447.786L538.524,447.786z"></path>
          </g>
          <path fill="#FFFFFF" stroke="#60544F" stroke-width="2" stroke-miterlimit="10" d="M489,469.643v6c0,1.578,4.477,2.857,10,2.857
            s10-1.279,10-2.857v-6H489z"></path>
          <path fill="#FFFFFF" stroke="#60544F" stroke-miterlimit="10" d="M533,449.786h-68l24,20h0.025
            c0.262,1.511,4.621,2.714,9.975,2.714s9.712-1.203,9.975-2.714H509L533,449.786z"></path>
        </g>
        <g>
          <polygon fill="#FFFFFF" points="396.871,459.75 358,449.521 358,288.336 418.586,227.75 579.414,227.75 640,288.336 640,449.531 
            599.123,459.75    "></polygon>
          <path fill="#60544F" d="M579,228.75l60,60v160l-40,10H397l-38-10v-160l60-60H579 M579.828,226.75H579H419h-0.828l-0.586,0.586
            l-60,60L357,287.922v0.828v160v1.542l1.491,0.392l38,10l0.25,0.066H397h202h0.246l0.239-0.06l40-10l1.515-0.379v-1.562v-160
            v-0.828l-0.586-0.586l-60-60L579.828,226.75L579.828,226.75z"></path>
        </g>
        <rect x="397" y="298.75" fill="#E0D8D3" stroke="#60544F" stroke-miterlimit="10" width="202" height="160"></rect>
        <polygon fill="#E0D8D3" stroke="#60544F" stroke-miterlimit="10" points="639,448.75 599,458.75 599,298.75 639,288.75   "></polygon>
        <polygon fill="#E0D8D3" stroke="#60544F" stroke-miterlimit="10" points="359,448.75 397,458.75 397,298.75 359,288.75   "></polygon>
        <polygon fill="#F4EEE6" stroke="#60544F" stroke-miterlimit="10" points="579,228.75 419,228.75 359,288.75 397,298.75 599,298.75 
          639,288.75  "></polygon>
        <path fill="#FFFFFF" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" d="M569,436.5c0,6.627-5.373,12-12,12H443
          c-6.627,0-12-5.373-12-12v-114c0-6.627,5.373-12,12-12h114c6.627,0,12,5.373,12,12V436.5z"></path>
        <g>
          <path fill="#FFFFFF" d="M500,440c-33.359,0-60.5-27.14-60.5-60.5S466.641,319,500,319s60.5,27.14,60.5,60.5S533.359,440,500,440z"></path>
          <path fill="#60544F" d="M500,319.5c33.084,0,60,26.916,60,60s-26.916,60-60,60s-60-26.916-60-60S466.916,319.5,500,319.5
             M500,318.5c-33.689,0-61,27.311-61,61s27.311,61,61,61s61-27.311,61-61S533.689,318.5,500,318.5L500,318.5z"></path>
        </g>
        <polyline id="arrow" fill="#60544F" points="496.83,348.346 500,339.894 503.17,348.346   "></polyline>
          <g>
              <path fill="none" stroke="#60544F" d="M500,379.5v61" id="separator"></path>
              <use xlink:href="#separator" transform="rotate(72, 500, 379.5)"></use>
              <use xlink:href="#separator" transform="rotate(144, 500, 379.5)"></use>
              <use xlink:href="#separator" transform="rotate(216, 500, 379.5)"></use>
              <use xlink:href="#separator" transform="rotate(288, 500, 379.5)"></use>
          </g>
          <text fill="#423733" style="font: 400 11px Source Sans Pro, source-sans-pro, sans-serif" text-anchor="middle">
              <textPath xlink:href="#textline" startOffset="50%">Americano</textPath>
          </text>
          <text transform="rotate(72, 500, 379.5)" fill="#423733" style="font: 400 11px Source Sans Pro, source-sans-pro, sans-serif" text-anchor="middle">
              <textPath xlink:href="#textline" startOffset="50%">Latté</textPath>
          </text>
          <text transform="rotate(144, 500, 379.5)" fill="#423733" style="font: 400 11px Source Sans Pro, source-sans-pro, sans-serif" text-anchor="middle">
              <textPath xlink:href="#textline" startOffset="50%">Mocha</textPath>
          </text>
          <text transform="rotate(216, 500, 379.5)" fill="#423733" style="font: 400 11px Source Sans Pro, source-sans-pro, sans-serif" text-anchor="middle">
              <textPath xlink:href="#textline" startOffset="50%">Mochiatto</textPath>
          </text>
          <text transform="rotate(288, 500, 379.5)" fill="#423733" style="font: 400 11px Source Sans Pro, source-sans-pro, sans-serif" text-anchor="middle">
              <textPath xlink:href="#textline" startOffset="50%">Espresso</textPath>
          </text>
        <radialGradient id="SVGID_12_" cx="542" cy="174.72" r="35.99" gradientTransform="matrix(1 0 0 1 -42 206)" gradientUnits="userSpaceOnUse">
          <stop offset="0.8139" style="stop-color:#60544F"></stop>
          <stop offset="1" style="stop-color:#60544F;stop-opacity:0"></stop>
        </radialGradient>
        <circle opacity="0.5" fill="url(#SVGID_12_)" cx="500" cy="380.72" r="35.99"></circle>
          <g opacity="0">
              <path id="mocha-area" d="M500,379.5v61A61,61,0,0,0,558.01,398.35z"></path>
              <path id="mochiatto-area" d="M500,379.5v61A61,61,0,0,0,558.01,398.35z" transform="rotate(72, 500, 379.5)"></path>
              <path id="espresso-area" d="M500,379.5v61A61,61,0,0,0,558.01,398.35z" transform="rotate(144, 500, 379.5)"></path>
              <path id="americano-area" d="M500,379.5v61A61,61,0,0,0,558.01,398.35z" transform="rotate(216, 500, 379.5)"></path>
              <path id="latte-area" d="M500,379.5v61A61,61,0,0,0,558.01,398.35z" transform="rotate(288, 500, 379.5)"></path>
          </g>
        <circle fill="#fff" stroke="#60544F" cx="500" cy="379.5" r="33"></circle>
        <circle id="dot" fill="none" stroke="#60544F" stroke-miterlimit="10" cx="500" cy="355.71" r="3.66"></circle>
        <circle id="knob" fill="#000000" cx="500" cy="379.5" r="33" style="opacity: 0;"></circle>
          <circle fill="#FFFFFF" stroke="#60544F" stroke-miterlimit="10" cx="439" cy="318.5" r="2"></circle>
          <circle fill="#FFFFFF" stroke="#60544F" stroke-miterlimit="10" cx="561" cy="318.5" r="2"></circle>
          <circle fill="#FFFFFF" stroke="#60544F" stroke-miterlimit="10" cx="561" cy="440.5" r="2"></circle>
          <circle fill="#FFFFFF" stroke="#60544F" stroke-miterlimit="10" cx="439" cy="440.5" r="2"></circle>
        
        <g id="legend">
          <rect x="785.5" y="524.5" fill="#60544F" stroke="#60544F" width="10" height="10"></rect>
          <rect x="785.5" y="544.5" fill="#d6edee" stroke="#60544F" stroke-miterlimit="10" width="10" height="10"></rect>
          <text transform="matrix(1 0 0 1 802.2 533.1641)" fill="#60544F" style="font: 400 12px Source Sans Pro, source-sans-pro, sans-serif">Espresso (33%)</text>
          <text transform="matrix(1 0 0 1 802.2 553.1641)" fill="#60544F" style="font: 400 12px Source Sans Pro, source-sans-pro, sans-serif">Hot Water (67%)</text>
          <text transform="matrix(1 0 0 1 695.0001 628.8398)" fill="#60544F" style="font: 300 20px Source Sans Pro, source-sans-pro, sans-serif">Americano</text>
        </g>
        <path fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" d="M917,634.5c0,6.627-5.373,12-12,12H691
          c-6.627,0-12-5.373-12-12v-124c0-6.627,5.373-12,12-12h214c6.627,0,12,5.373,12,12V634.5z"></path>
        <path id="lead-target" fill="#CCC1BC" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" d="M597.429,278.5L559,228.5H438
          l-37.429,50H597.429z"></path>
        <line fill="none" stroke="#60544F" stroke-miterlimit="10" x1="439" y1="228.5" x2="439" y2="278.5"></line>
        <line fill="none" stroke="#60544F" stroke-miterlimit="10" x1="559.571" y1="228.5" x2="559.571" y2="278.5"></line>
        <polygon fill="#D6EDEE" stroke="#60544F" stroke-miterlimit="10" points="499,277.5 584.886,277.5 559.143,243.5 499,243.5   "></polygon>
        <g>
          <g>
            <defs>
              <polygon id="SVGID_13_" points="498.886,277.259 413,277.259 438.743,243.259 498.886,243.259         "></polygon>
            </defs>
            <clipPath id="SVGID_14_">
              <use xlink:href="#SVGID_13_" overflow="visible"></use>
            </clipPath>
            <g clip-path="url(#SVGID_14_)">
              <ellipse fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="450.912" cy="258.311" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.8735 -0.4868 0.4868 -0.8735 669.7087 712.0128)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="427.358" cy="268.999" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.4709 -0.8822 0.8822 -0.4709 489.8846 819.3075)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="490.638" cy="262.746" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.4709 -0.8822 0.8822 -0.4709 415.2328 788.3985)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="444.043" cy="269.678" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.4709 -0.8822 0.8822 -0.4709 479.6064 818.7933)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="485.345" cy="265.571" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.4709 -0.8822 0.8822 -0.4709 436.6833 787.9611)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="454.637" cy="263.027" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.8824 -0.4706 0.4706 -0.8824 749.885 720.0967)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="464.952" cy="266.315" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.8824 -0.4706 0.4706 -0.8824 754.0936 731.8059)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="468.52" cy="271.644" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.8824 -0.4706 0.4706 -0.8824 770.1696 739.825)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="477.561" cy="273.644" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.8824 -0.4706 0.4706 -0.8824 756.9172 704.5107)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="466.52" cy="257.643" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.8824 -0.4706 0.4706 -0.8824 741.4103 713.2869)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="459.864" cy="263.969" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.8824 -0.4706 0.4706 -0.8824 690.028 713.6212)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="434.214" cy="270.559" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.8824 -0.4706 0.4706 -0.8824 771.2519 699.3343)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="473.041" cy="253.263" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.8824 -0.4706 0.4706 -0.8824 701.4598 726.6494)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="441.559" cy="275.644" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.8824 -0.4706 0.4706 -0.8824 774.2177 747.3199)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="480.521" cy="276.885" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 293.138 751.4692)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="462.938" cy="252.323" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 294.4048 750.2875)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="463.074" cy="251.199" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.5855 0.8107 -0.8107 -0.5855 916.987 29.4758)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="450.958" cy="249.172" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 260.2598 733.8298)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="439.073" cy="257.345" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 298.3394 773.8927)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="474.979" cy="261.345" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 232.4501 752.6062)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="433.073" cy="278.442" rx="4" ry="6"></ellipse>
                
                <ellipse fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="439" cy="269.259" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 224.9438 737.9938)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="423.168" cy="274.295" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 266.965 773.3755)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="459.074" cy="274.295" rx="4" ry="6"></ellipse>
                
                <ellipse fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="437" cy="263.259" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 278.1527 750.7935)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="455.161" cy="258.294" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 264.3377 757.2653)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="450.978" cy="267.346" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 322.381 773.8436)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="486.979" cy="251.199" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 279.8261 791.0107)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="472.929" cy="277.698" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 309.7851 779.53)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="483.075" cy="259.345" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 302.1902 807.3271)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="490.98" cy="276.441" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 320.78 780.4955)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="488.979" cy="255.199" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 302.28 783.6927)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="481.075" cy="264.586" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 259.0287 744.7932)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="443.073" cy="263.345" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 311.1602 768.3956)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="479.075" cy="253.199" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 309.6638 803.4297)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="493.076" cy="271.346" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 271.6239 739.1082)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="446.977" cy="255.2" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 296.0231 796.5965)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="483.379" cy="273.672" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 290.8345 778.0555)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="472.979" cy="266.586" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 275.6698 777.2891)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="465.074" cy="272.587" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 292.7961 785.2273)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="476.979" cy="269.346" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 254.2292 764.8404)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="449.113" cy="275.39" rx="4" ry="6"></ellipse>
              
                <ellipse transform="matrix(-0.1703 -0.9854 0.9854 -0.1703 267.9093 762.7525)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="455.074" cy="268.586" rx="4" ry="6"></ellipse>
            </g>
          </g>
        </g>
        <polygon fill="#CCC1BC" stroke="#60544F" stroke-miterlimit="10" points="503,277.5 501.297,235.5 495.846,235.5 495,277.5   "></polygon>
        <path id="lead" fill="#E0D8D3" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" d="M569,132.5l-10,96H438l-9-96H569z"></path>
        <ellipse id="waterlevel" display="none" fill="none" stroke="#60544F" stroke-width="2" stroke-miterlimit="10" cx="499" cy="526.5" rx="66.5" ry="20.9"></ellipse>
        <ellipse id="bottom" display="none" fill="none" stroke="#60544F" stroke-width="2" stroke-miterlimit="10" cx="499" cy="666.5" rx="50.909" ry="16"></ellipse>
      </g>
    </svg>
  </script>

  <script>
    var Application = Regular.extend({
      template: '#app',
      init: function(){}
    }).use("timeout");
    
    var app = new Application({
      data: {
        width: 200,
        height: 200,
        circle: 100
      },
      init: function(data){
        var self = this;

        this.$interval(function(){
          data.circle *= 1.004
        },100)
      },
      small: function(){
        this.data.circle /= 1.2;
      }
    }).inject('#pie');
  </script>
</body>
</html>